<template>
  <div>
    <el-menu
      :default-active="defaultActive"
      :default-openeds="defaultOpen"
      background-color="#545c64"
      text-color="#fff">
      <template v-for="(item,key) in menus">
        <el-submenu v-if="item.children !== undefined" :index="item.id" :key="key">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">{{ item.label }}</span>
          </template>
          <el-menu-item-group>
            <span slot="title">分组一</span>
            <el-menu-item v-for="(i,k) in item.children" :key="k" :index="i.url">{{ i.label }}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item v-else :key="key" :index="item.url">
          <i class="el-icon-menu"></i>
          <span slot="title">{{ item.label }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'sideNav',
  props: ['menus'],
  data () {
    return {
      defaultOpen: [],
      defaultActive: ''
    }
  },
  watch: {
    menus (val, oldVal) {
      this.defaultOpen = []
      this.defaultActive = ''
      if (val !== undefined && val.length !== 0) {
        for (let i = 0; i < this.menus.length; i++) {
          this.defaultOpen.push(this.menus[i].id)
        }

        if (this.menus[0].children !== undefined) {
          this.defaultActive = this.menus[0].children[0].url
        } else {
          this.defaultActive = this.menus[0].url
        }
        console.log(this.defaultActive)
      }
    }
  },
  methods: {}
}
</script>

<style scoped>

</style>
